<template>
	<view class="app-container">
		<view class="search-box">
			<uni-search-bar v-model="queryParams.keywords" radius="100" placeholder="请输入活动名称搜索" bg-color="#FFFFFF" clearButton="none"
				cancelButton="none" @confirm="handleSearch" />
		</view>
		<z-paging ref="paging" class="activity-list flex-1" :fixed="false" v-model="activityList"
			@query="getSignUpActivityList">
			<ActivityItem v-for="item in activityList" :key="item.id" :data="item" class="activity-item-box" />
		</z-paging>
	</view>
</template>

<script setup>
	import {
		listSignUpActivity
	} from "@/api";
	import {
		reactive,
		toRefs,
		ref
	} from "vue";

	const state = reactive({
		queryParams: {
			page: 1,
			limit: 10,
			keywords: ""
		},
		activityList: []
	});

	const {
		queryParams,
		activityList
	} = toRefs(state);

	const paging = ref(null);

	// 获取已报名活动列表
	async function getSignUpActivityList(pageNum, pageSize) {
		queryParams.value.page = pageNum;
		queryParams.value.limit = pageSize;
		const res = await listSignUpActivity(queryParams.value);
		res.data.data.forEach(item => {
			item.activityStatusDup = 0;
		})
		paging.value.complete(res.data.data);
	}
	
	// 搜索按钮操作
	function handleSearch() {
		paging.value.reload()
	}
</script>

<style scoped lang="scss">
	.app-container {

		.search-box {
			padding: 20rpx 30rpx;
		}

		.activity-list {
			overflow-y: auto;
			padding: 0 20rpx;
			
			::v-deep .activity-item-box:last-of-type {
				.activity-item {
					margin-bottom: 0;
				}
			}
		}
	}
</style>